<template>
  <div class="q-pa-md">
    <q-page>
    <header class="page-header row items-start">
      <q-breadcrumbs class="header-title" active-color="grey-7">
        <q-breadcrumbs-el class="first-breadcrumbs"  label="系统管理" />
        <q-breadcrumbs-el label="展会信息" class="text-weight-medium" />
      </q-breadcrumbs>
      <q-space />

      <q-btn
        color="primary"
        label="创建"
        padding="4px 12px"
        class="q-mr-sm"
       @click="handleCreate()"
      >
        <q-tooltip>填入表单信息AI补全创建</q-tooltip>
      </q-btn>

      <q-btn
        color="primary"
        label="检查Excel"
        padding="4px 12px"
        class="q-mr-sm"
        @click="checkExcel"
      >
        <q-tooltip>检查Excel格式是否符合要求</q-tooltip>
        <input
          type="file"
          accept=".xlsx"
          class="hidden-input"
          ref="checkFileInput"
          @change="handleCheckFile"
        />
      </q-btn>
      <q-btn
        color="primary"
        label="导入Excel"
        padding="4px 12px"
        class="q-mr-sm"
        @click="importExcel"
      >
        <q-tooltip>支持.xlsx格式文件</q-tooltip>
        <input
          type="file"
          accept=".xlsx"
          class="hidden-input"
          ref="fileInput"
          @change="handleFileUpload"
        />
      </q-btn>
      <q-btn
        color="primary"
        label="导出TXT"
        padding="4px 12px"
        class="q-mr-sm"
        @click="exportTXT('txt')"
      >
      </q-btn>

      <q-btn-dropdown
      color="primary"
      label="导出EXCEL"
      padding="4px 12px"
      class="q-mr-sm"
    >
      <!-- 下拉菜单内容 -->
      <q-list>
        <!-- 直接导出 -->
        <q-item clickable v-close-popup @click="exportExcel('excel')">
          <q-item-section>
            <q-item-label>直接导出</q-item-label>
            <q-item-label caption>导出全部数据</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="download" />
          </q-item-section>
        </q-item>

        <!-- 按行业导出 -->
        <q-item clickable v-close-popup @click="exportExcel('excel_industry')">
          <q-item-section>
            <q-item-label>按行业导出</q-item-label>
            <q-item-label caption>按行业分类导出数据</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="category" />
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>


    </header>

    <!-- 迷你统计卡片 -->
    <div class="row q-col-gutter-sm q-mb-md">
      <div class="col-12 col-md-6">
        <q-card class="mini-stat-card">
          <q-card-section class="q-pa-sm">
            <div class="row items-center">
              <div class="col">
                <div class="text-subtitle2 text-grey-7">展会总数</div>
                <div class="text-h6 text-primary">{{ statistics.totalExhibitions }}</div>
              </div>
              <div class="col-auto">
                <q-icon name="event" size="24px" color="primary" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>

      <div class="col-12 col-md-6">
        <q-card class="mini-stat-card">
          <q-card-section class="q-pa-sm">
            <div class="row items-center">
              <div class="col">
                <div class="text-subtitle2 text-grey-7">展会最多的城市</div>
                <div class="text-h6 text-positive">{{ statistics.maxCity }}</div>
              </div>
              <div class="col-auto">
                <q-icon name="verified" size="24px" color="positive" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>

      <div class="col-12 col-md-6">
        <q-card class="mini-stat-card">
          <q-card-section class="q-pa-sm">
            <div class="row items-center">
              <div class="col">
                <div class="text-subtitle2 text-grey-7">展会最多的行业</div>
                <div class="text-h6 text-warning">{{ statistics.maxIndustry }}</div>
              </div>
              <div class="col-auto">
                <q-icon name="square" size="24px" color="warning" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>

      <div class="col-12 col-md-6">
        <q-card class="mini-stat-card">
          <q-card-section class="q-pa-sm">
            <div class="row items-center">
              <div class="col">
                <div class="text-subtitle2 text-grey-7">本月展会数</div>
                <div class="text-h6 text-info">{{ statistics.monthlyExhibitions }}</div>
              </div>
              <div class="col-auto">
                <q-icon name="calendar_month" size="24px" color="info" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>

    <!-- 图表区域 -->
    <div style="display: none;" class="row q-col-gutter-md q-mb-md">
      <!-- 行业分布饼图 -->
      <div  class="col-12 col-md-6">
        <q-card class="chart-card">
          <q-card-section>
            <div class="text-h6">行业分布</div>
            <div class="chart-container">
              <canvas ref="industryChart"></canvas>
            </div>
          </q-card-section>
        </q-card>
      </div>

      <!-- 洲际分布柱状图 -->
      <div class="col-12 col-md-6">
        <q-card class="chart-card">
          <q-card-section>
            <div class="text-h6">洲际分布</div>
            <div class="chart-container">
              <canvas ref="continentChart"></canvas>
            </div>
          </q-card-section>
        </q-card>
      </div>

      <!-- 月份分布趋势图 -->
      <div class="col-12 col-md-6">
        <q-card class="chart-card">
          <q-card-section>
            <div class="text-h6">展会月份分布</div>
            <div class="chart-container">
              <canvas ref="monthChart"></canvas>
            </div>
          </q-card-section>
        </q-card>
      </div>

      <!-- 国家TOP5分布 -->
      <div class="col-12 col-md-6">
        <q-card class="chart-card">
          <q-card-section>
            <div class="text-h6">展会举办国家TOP5</div>
            <div class="chart-container">
              <canvas ref="countryChart"></canvas>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>

    <!-- 搜索栏 -->
    <div class="q-pa-sm row q-gutter-sm items-center">
      
      <q-input
        v-model="searchForm.exhibition_number"
        dense
        outlined
        label="展会编号"
        class="col-2 col-sm-4"
        @update:model-value="debounceSearch"
        clearable
      >
        <template v-slot:append>
          <q-icon name="tag" />
        </template>
      </q-input>
      
      <q-input
        v-model="searchForm.chinese_name"
        dense
        outlined
        label="中文/英文名称/英文简称"
        class="col-2 col-sm-4"
        @update:model-value="debounceSearch"
        clearable
      >
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>
      
  
      
      <!-- 三级级联选择：大洲/国家/城市 -->
      <div class="col-2 col-sm-4">
        <q-btn
          outline
          no-caps
          :label="getLocationLabel()"
          class="full-width location-selector"
          color="primary"
          @click="showLocationDialog = true"
        >
          <q-icon name="place" class="q-ml-sm" />
        </q-btn>
        
        <!-- 三级级联选择对话框 -->
        <q-dialog v-model="showLocationDialog" persistent>
          <q-card style="width: 800px; max-width: 95vw;">
            <q-card-section class="row items-center bg-primary text-white">
              <div class="text-h6">选择地区</div>
              <q-space />
              <q-btn icon="close" flat round dense v-close-popup />
            </q-card-section>
            
            <q-card-section class="q-pt-lg">
              <div class="text-subtitle1 q-mb-md text-primary q-px-md">
                <q-icon :name="currentLocationStep === 1 ? 'public' : 
                               currentLocationStep === 2 ? 'flag' : 'location_city'" 
                       class="q-mr-sm" />
                {{ currentLocationStep === 1 ? '选择大洲' : 
                   currentLocationStep === 2 ? '选择国家' : '选择城市' }}
              </div>
              
              <!-- 步骤指示器 -->
              <q-stepper
                v-model="currentLocationStep"
                ref="stepper"
                color="primary"
                inactive-color="grey-7"
                header-nav
                flat
                class="q-mb-md"
              >
                <q-step
                  :name="1"
                  title="大洲"
                  icon="public"
                  :done="currentLocationStep > 1"
                >
                </q-step>
                
                <q-step
                  :name="2"
                  title="国家"
                  icon="flag"
                  :done="currentLocationStep > 2"
                  :disable="!selectedContinent"
                >
                </q-step>
                
                <q-step
                  :name="3"
                  title="城市"
                  icon="location_city"
                  :disable="!selectedCountry"
                >
                </q-step>
              </q-stepper>
              
              <!-- 大洲选择 -->
              <div v-if="currentLocationStep === 1" class="row q-col-gutter-md q-px-md q-pb-md">
                <div v-for="continent in continentOptions" :key="continent" class="col-4 col-sm-4">
                  <q-card 
                    clickable
                    class="location-card text-center"
                    :class="{'selected': selectedContinent === continent}"
                    @click="selectContinent(continent)"
                  >
                    <q-card-section>
                      <div class="continent-icon q-mb-sm">
                        <q-icon name="public" size="2.2em" :color="selectedContinent === continent ? 'primary' : 'grey-7'" />
                      </div>
                      <div class="text-subtitle1 text-weight-medium">{{ continent }}</div>
                    </q-card-section>
                  </q-card>
                </div>
              </div>
              
              <!-- 国家选择 -->
              <div v-if="currentLocationStep === 2" class="row q-col-gutter-md q-px-md q-pb-md">
                <div class="col-12 q-mb-sm">
                  <q-chip
                    outline
                    color="primary"
                    text-color="primary"
                    icon="public"
                    removable
                    @remove="previousLocationStep"
                  >
                    {{ selectedContinent }}
                  </q-chip>
                </div>
                <div v-for="country in countryOptions[selectedContinent] || []" :key="country" class="col-4 col-sm-4">
                  <q-card 
                    clickable
                    class="location-card text-center"
                    :class="{'selected': selectedCountry === country}"
                    @click="selectCountry(country)"
                  >
                    <q-card-section>
                      <div class="country-icon q-mb-sm">
                        <q-icon name="flag" size="2.2em" :color="selectedCountry === country ? 'primary' : 'grey-7'" />
                      </div>
                      <div class="text-subtitle1 text-weight-medium">{{ country }}</div>
                    </q-card-section>
                  </q-card>
                </div>
              </div>
              
              <!-- 城市选择 -->
              <div v-if="currentLocationStep === 3" class="row q-col-gutter-md q-px-md q-pb-md">
                <div class="col-12 q-mb-sm">
                  <q-chip
                    outline
                    color="primary"
                    text-color="primary"
                    icon="public"
                    class="q-mr-xs"
                    removable
                    @remove="() => { currentLocationStep = 1 }"
                  >
                    {{ selectedContinent }}
                  </q-chip>
                  <q-chip
                    outline
                    color="primary"
                    text-color="primary"
                    icon="flag"
                    removable
                    @remove="previousLocationStep"
                  >
                    {{ selectedCountry }}
                  </q-chip>
                </div>
                <div v-for="city in cityOptions[selectedCountry] || []" :key="city" class="col-4 col-sm-4">
                  <q-card 
                    clickable
                    class="location-card text-center"
                    :class="{'selected': selectedCity === city}"
                    @click="selectCity(city)"
                  >
                    <q-card-section>
                      <div class="city-icon q-mb-sm">
                        <q-icon name="location_city" size="2.2em" :color="selectedCity === city ? 'primary' : 'grey-7'" />
                      </div>
                      <div class="text-subtitle1 text-weight-medium">{{ city }}</div>
                    </q-card-section>
                  </q-card>
                </div>
              </div>
            </q-card-section>
            
            <q-separator />
            
            <q-card-actions align="right" class="bg-grey-1 q-py-sm">
              <q-btn flat label="返回" color="grey-7" @click="previousLocationStep" :disable="currentLocationStep === 1" />
              <q-btn flat label="清除" color="negative" @click="clearLocation" icon="delete_sweep" />
              <q-btn unelevated label="确定" color="primary" @click="confirmLocation" icon-right="check" />
            </q-card-actions>
          </q-card>
        </q-dialog>
      </div>
      
      <!-- 行业选择，四列布局 -->
      <div class="col-2 col-sm-4">
        <q-btn
          outline
          no-caps
          :label="searchForm.industry || '选择行业'"
          class="full-width industry-selector"
          color="primary"
          @click="showIndustryDialog = true"
        >
          <q-icon name="category" class="q-ml-sm" />
        </q-btn>
        
        <!-- 行业选择对话框 -->
        <q-dialog v-model="showIndustryDialog">
          <q-card style="width: 900px; max-width: 95vw;">
            <q-card-section class="row items-center bg-primary text-white">
              <div class="text-h6">选择行业</div>
              <q-space />
              <q-btn icon="close" flat round dense v-close-popup />
            </q-card-section>
            
            <q-card-section class="q-pa-md">
              <!-- 搜索栏 -->
              <q-input
                v-model="industrySearchTerm"
                outlined
                dense
                placeholder="搜索行业"
                class="q-mb-md"
                clearable
              >
                <template v-slot:append>
                  <q-icon name="search" />
                </template>
              </q-input>
              
              <div class="industry-grid q-mt-sm">
                <div class="row q-col-gutter-md">
                  <div 
                    v-for="industry in filteredIndustries" 
                    :key="industry" 
                    class="col-3 col-md-3 q-mb-sm"
                  >
                    <q-card
                      :class="{'industry-card-selected': searchForm.industry === industry}"
                      class="industry-card cursor-pointer"
                      @click="selectIndustry(industry)"
                    >
                      <q-card-section class="q-pa-md text-center">
                        <q-icon 
                          name="category" 
                          size="1.8em" 
                          :color="searchForm.industry === industry ? 'white' : 'primary'"
                          class="q-mb-sm"
                        />
                        <div class="industry-name ellipsis-2-lines">
                          {{ industry }}
                        </div>
                      </q-card-section>
                    </q-card>
                  </div>
                </div>
              </div>
            </q-card-section>
            
            <q-separator />
            
            <q-card-actions align="right" class="bg-grey-1 q-py-sm">
              <q-btn flat label="清除" color="negative" @click="clearIndustry" icon="delete_sweep" />
              <q-btn unelevated label="确定" color="primary" @click="() => { showIndustryDialog = false }" icon-right="check" />
            </q-card-actions>
          </q-card>
        </q-dialog>
      </div>
      
      <q-btn
        color="primary"
        label="重置"
        padding="4px 12px"
        @click="resetSearch"
        class="q-ml-sm"
      >
        <q-tooltip>重置搜索条件</q-tooltip>
      </q-btn>
    </div>
    <q-table
      :rows="dataList"
      :columns="columns"
      row-key="exhibition_number"
      :loading="loading"
      virtual-scroll
      :virtual-scroll-sticky-size-start="48"
      table-style="max-height: 700px"
      :pagination="pagination"
      hide-pagination
      @update:pagination="loadData"
      v-model:expanded="expanded"
    >
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td auto-width>
            <q-btn
              size="sm"
              color="grey-6"
              round
              dense
              @click="toggleExpand(props.row.chinese_name)"
              :icon="isExpanded(props.row.chinese_name) ? 'remove' : 'add'"
            />
          </q-td>
          <q-td key="exhibition_number" :props="props">
            {{ props.row.exhibition_number }}
          </q-td>
          <q-td key="industry" :props="props">
            {{ props.row.industry }}
          </q-td>
          <q-td key="exhibition_info" :props="props">
            <div class="row items-start no-wrap">
              <q-img
                v-if="props.row.logo"
                :src="props.row.logo.startsWith('http') ? props.row.logo : 'https://gem.ccpititc.com' + props.row.logo"
                spinner-color="primary"
                style="height: 50px; width: 50px; object-fit: contain; cursor: pointer;"
                class="q-mr-sm"
                @click="previewImage(props.row.logo)"
              />
              <div class="column">
                <div class="text-weight-medium text-left">{{ props.row.chinese_name }}</div>
                <div class="text-caption text-left">{{ props.row.english_name }}</div>
                <div class="text-caption text-left">{{ props.row.english_short_name }}</div>
              </div>
            </div>
          </q-td>
          <q-td key="location" :props="props">
            <div class="text-left">
              {{ props.row.continent }} - {{ props.row.country }} - {{ props.row.city }}
            </div>
          </q-td>
          <q-td key="holding_time" :props="props">
            {{ props.row.holding_time }}
          </q-td>
          <q-td key="frequency" :props="props">
            {{ props.row.frequency }}
          </q-td>
          <q-td key="source_user" :props="props">
            {{ props.row.source_user }}
          </q-td>
          <q-td key="source" :props="props">
            {{ props.row.source }}
          </q-td>
          <q-td key="ai_checked_status" :props="props">
            <q-btn
              flat
              round
              dense
              :color="getStatusColor(props.row.ai_checked_status)"
              :icon="getStatusIcon(props.row.ai_checked_status)"
              class="q-px-none"
              @click.stop="() => {}"
            >
              <q-tooltip
                anchor="bottom middle"
                self="top middle"
                :offset="[0, 8]"
                class="bg-dark text-white"
                style="border-radius: 4px; max-width: 250px;"
              >
                <div class="q-pa-sm">
                  <div class="row items-center q-mb-sm">
                    <q-icon
                      :name="getStatusIcon(props.row.ai_checked_status)"
                      :color="getStatusColor(props.row.ai_checked_status)"
                      size="20px"
                      class="q-mr-sm"
                    />
                    <span class="text-weight-medium">
                      <span :class="`text-${getStatusColor(props.row.ai_checked_status)}`">
                        {{ props.row.ai_checked_status === 1 ? '已通过' :
                           props.row.ai_checked_status === 2 ? '未通过' :
                           props.row.ai_checked_status === 3 ? '已核对' :
                           props.row.ai_checked_status === 4 ? 'AI补全中' :
                           props.row.ai_checked_status === 5 ? 'AI补全完成' : '待检查'
                        }}
                      </span>
                    </span>
                  </div>
                  <div class="text-caption">{{ getStatusDescription(props.row.ai_checked_status) }}</div>
                </div>
              </q-tooltip>
            </q-btn>
          </q-td>
          <q-td key="actions" :props="props">
            <div class="q-gutter-x-xs">
              <q-btn
                color="primary"
                label="查看"
                padding="4px 8px"
                @click="handleEdit(props.row)"
              />
              <q-btn
                color="primary"
                label="删除"
                padding="4px 8px"
                @click="handleDelete(props.row)"
              />
            </div>
          </q-td>
        </q-tr>
        <q-tr v-show="isExpanded(props.row.chinese_name)" :props="props">
          <q-td colspan="100%">
            <div class="q-pa-md bg-grey-1">
              <!-- 基本信息表格 -->
              <div class="text-weight-medium q-mb-sm">基本信息</div>
              <q-markup-table flat bordered class="bg-white">
                <tbody>
                  <tr>
                    <td class="text-weight-medium table-label">展会名称</td>
                    <td class="text-left wrap-cell" colspan="3">
                      <div class="text-weight-medium">{{ props.row.chinese_name }}</div>
                      <div class="text-caption q-mt-sm">英文名称：{{ props.row.english_name }}</div>
                      <div class="text-caption" v-if="props.row.english_short_name">英文简称：{{ props.row.english_short_name }}</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="text-weight-medium table-label">所在地区</td>
                    <td class="text-left wrap-cell">
                      <div class="location-info">
                        <q-chip outline color="primary" class="q-mr-sm">
                          <q-icon name="public" size="18px" class="q-mr-xs" />
                          {{ props.row.continent }}
                        </q-chip>
                        <q-chip outline color="secondary" class="q-mr-sm">
                          <q-icon name="flag" size="18px" class="q-mr-xs" />
                          {{ props.row.country }}
                        </q-chip>
                        <q-chip outline color="accent">
                          <q-icon name="location_city" size="18px" class="q-mr-xs" />
                          {{ props.row.city }}
                        </q-chip>
                      </div>
                    </td>
                    <td class="text-weight-medium table-label">举办时间</td>
                    <td class="text-left wrap-cell">
                      <div class="time-info">
                        <q-icon name="event" size="18px" class="q-mr-xs text-primary" />
                        {{ props.row.holding_time }}
                      </div>
                      <div class="text-caption q-mt-xs">
                        <q-icon name="update" size="16px" class="q-mr-xs text-grey-7" />
                        频率：{{ props.row.frequency }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="text-weight-medium table-label">展馆</td>
                    <td class="text-left wrap-cell">
                      <div>{{ props.row.exhibition_hall }}</div>
                      <div class="text-caption text-grey-7">{{ props.row.exhibition_hall_english }}</div>
                    </td>
                    <td class="text-weight-medium table-label">主办方</td>
                    <td class="text-left wrap-cell">
                      <div>{{ props.row.organizer }}</div>
                      <div class="text-caption text-grey-7">{{ props.row.organizer_en }}</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="text-weight-medium table-label">展会面积</td>
                    <td class="text-left wrap-cell">
                      <div class="area-info">
                        <q-icon name="square_foot" size="18px" class="q-mr-xs text-primary" />
                        {{ props.row.exhibition_area ? props.row.exhibition_area + ' 平方米' : '暂无' }}
                      </div>
                    </td>
                    <td class="text-weight-medium table-label">联系方式</td>
                    <td class="text-left wrap-cell">
                      <div class="contact-info">
                        <q-icon name="phone" size="18px" class="q-mr-xs text-primary" />
                        {{ props.row.contact_info || '暂无' }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="text-weight-medium table-label">官方网站</td>
                    <td class="text-left wrap-cell">
                      <div class="website-info">
                        <q-icon name="language" size="18px" class="q-mr-xs text-primary" />
                        <a
                          v-if="props.row.official_website"
                          :href="props.row.official_website.startsWith('http') ? formatWebsite(props.row.official_website) : 'http://' + formatWebsite(props.row.official_website)"
                          target="_blank"
                          class="text-primary text-decoration-none hover-underline"
                        >
                          {{ formatWebsite(props.row.official_website) }}
                        </a>
                        <span v-else>暂无</span>
                      </div>
                    </td>
                    <td class="text-weight-medium table-label">行业</td>
                    <td class="text-left wrap-cell">
                      <div class="industry-info">
                        <q-icon name="category" size="18px" class="q-mr-xs text-primary" />
                        {{ props.row.industry }}
                      </div>
                    </td>
                  </tr>
                </tbody>
              </q-markup-table>

              <!-- 展会详情表格 -->
              <div class="text-weight-medium q-my-sm">展会详情</div>
              <q-markup-table flat bordered class="bg-white">
                <tbody>
                  <tr>
                    <td class="text-weight-medium table-label">展品范围</td>
                    <td class="text-left wrap-cell">
                      <div class="scope-info text-wrap">
                        <q-icon name="inventory_2" size="18px" class="q-mr-xs text-primary" />
                        {{ formatExhibitScope(props.row.exhibit_scope) }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="text-weight-medium table-label">展会描述</td>
                    <td class="text-left wrap-cell">
                      <div class="description-info text-wrap">
                        <q-icon name="description" size="18px" class="q-mr-xs text-primary" />
                        {{ formatDescription(props.row.description) }}
                      </div>
                    </td>
                  </tr>
                  <tr v-if="props.row.remarks">
                    <td class="text-weight-medium table-label">备注</td>
                    <td class="text-left wrap-cell">
                      <div class="remarks-info text-wrap">
                        <q-icon name="notes" size="18px" class="q-mr-xs text-primary" />
                        {{ props.row.remarks }}
                      </div>
                    </td>
                  </tr>
                </tbody>
              </q-markup-table>

              <!-- AI检查结果 -->
              <div class="text-weight-medium q-my-sm">AI检查结果</div>
              <q-markup-table flat bordered class="bg-white">
                <tbody>
                  <tr v-if="props.row.error_check_description">
                    <td class="text-weight-medium table-label">
                      <div class="row items-center no-wrap">
                        <q-icon
                          :name="props.row.error_check_description === '无发现明显错误' ? 'check_circle' : 'warning'"
                          :color="props.row.error_check_description === '无发现明显错误' ? 'positive' : 'warning'"
                          size="20px"
                          class="q-mr-sm"
                        />
                        错误描述
                      </div>
                    </td>
                    <td
                      class="text-left wrap-cell"
                      :class="{
                        'bg-red-1': props.row.error_check_description !== '无发现明显错误',
                        'bg-green-1': props.row.error_check_description === '无发现明显错误'
                      }"
                    >
                      <div class="error-info text-wrap">
                        {{ props.row.error_check_description }}
                      </div>
                    </td>
                  </tr>
                  <tr v-if="props.row.advice_check_description">
                    <td class="text-weight-medium table-label">
                      <div class="row items-center no-wrap">
                        <q-icon name="tips_and_updates" color="info" size="20px" class="q-mr-sm" />
                        建议
                      </div>
                    </td>
                    <td class="text-left wrap-cell bg-blue-1">
                      <div class="advice-info text-wrap">
                        {{ props.row.advice_check_description }}
                      </div>
                    </td>
                  </tr>
                </tbody>
              </q-markup-table>
            </div>
          </q-td>
        </q-tr>
      </template>
      <template v-slot:no-data="{ filter }">
        <div class="full-width row flex-center q-pa-md text-grey">
          <q-icon :name="filter ? 'search_off' : 'sentiment_dissatisfied'" size="2em" class="q-mr-sm" />
          <span>{{ filter ? '未找到匹配的数据' : '暂无展会数据' }}</span>
        </div>
      </template>

      <template v-slot:loading>
        <q-inner-loading showing color="primary">
          <q-spinner-dots size="50px" />
        </q-inner-loading>
      </template>
    </q-table>
    <div class="row justify-center q-mt-md">
      <q-pagination
        v-model="pagination.page"
        color="grey-8"
        :max="pagesNumber"
        size="sm"
        :max-pages="6"
        boundary-numbers
        @update:model-value="onPageChange"
      />
    </div>
    </q-page>
  </div>
</template>

<script setup>
import {onMounted, reactive,  ref, computed,h, onUnmounted} from 'vue'
import { useRouter } from 'vue-router';
import { useQuasar,QBtn,QTooltip,QIcon } from 'quasar'
import { getExhibitionList, importExhibition, checkExhibition, deleteExhibition, exportExhibition,getExhibitionStatistics } from 'src/api/exhibition'
import 'echarts-wordcloud'
import { useExhibitionListStore } from 'src/stores/exhibitionList'


const router = useRouter();



// 添加状态描述映射
const getStatusDescription = (status) => {
  const map = {
    0: '该展会信息尚未经过AI检查',
    1: '该展会信息已通过AI检查，数据完整性和准确性良好',
    2: '该展会信息未通过AI检查，请查看详细错误说明',
    3: '该展会信息已经过人工核对',
    4: 'AI补全中',
    5: 'AI补全完成'
  }
  return map[status] || '未知状态'
}

const columns = [
  {
    name: 'expand',
    label: '',
    field: '',
    align: 'left'
  },
  {
    name: 'exhibition_number',
    align: 'left',
    label: '展会编号',
    field: row => row.exhibition_number
  },
  {
    name: 'industry',
    align: 'left',
    label: '行业',
    field: row => row.industry
  },
  {
    name: 'exhibition_info',
    align: 'left',
    label: '展会信息',
    field: row => row.chinese_name,
    style: 'width: 300px; max-width: 300px; white-space: normal'
  },
  {
    name: 'location',
    align: 'left',
    label: '所在区',
    field: row => `${row.continent}-${row.country}-${row.city}`,
    style: 'max-width: 200px'
  },
  {
    name: 'holding_time',
    align: 'left',
    label: '举办日期',
    field: row => row.holding_time,
    sortable: true
  },
  {
    name: 'frequency',
    align: 'left',
    label: '频率',
    field: row => row.frequency
  },
  {
    name: 'source_user',
    align: 'left',
    label: '上传人',
    field: row => row.frequency
  },
  {
    name: 'source',
    align: 'left',
    label: '上传源',
    field: row => row.source
  },
  {
    name: 'ai_checked_status',
    align: 'center',
    label: 'AI检查',
    field: row => row.ai_checked_status,
    format: (val) => {
      const color = getStatusColor(val);
      const icon = getStatusIcon(val);
      const description = getStatusDescription(val);
      
      // 为AI补全中状态的图标添加旋转class
      const iconClass = val === 4 ? 'rotating-icon q-mr-sm' : 'q-mr-sm';

      return h('div', { class: 'flex flex-center' }, [
        h(QBtn, {
          flat: true,
          round: true,
          dense: true,
          color: color,
          icon: icon,
          class: `q-px-none ${val === 4 ? 'ai-processing-btn' : ''}`
        }, () => [
          h(QTooltip, {
            anchor: 'bottom middle',
            self: 'top middle',
            offset: [0, 8],
            class: 'bg-dark text-white',
            style: 'border-radius: 4px; max-width: 250px;'
          }, () => [
            h('div', { class: 'q-pa-sm' }, [
              h('div', { class: 'row items-center q-mb-sm' }, [
                h(QIcon, {
                  name: icon,
                  color: color,
                  size: '20px',
                  class: iconClass
                }),
                h('span', { class: 'text-weight-medium' }, [
                  h('span', { class: `text-${color}` },
                    val === 1 ? '已通过' :
                    val === 2 ? '未通过' :
                    val === 3 ? '已核对' :
                    val === 4 ? 'AI补全中' :
                    val === 5 ? 'AI补全完成' : '待检查'
                  )
                ])
              ]),
              h('div', { class: 'text-caption' }, description)
            ])
          ])
        ])
      ]);
    }
  },
  {
    name: 'actions',
    label: '操作',
    align: 'center'
  }
];



// 状态图标映射
const getStatusIcon = (status) => {
  const map = {
    0: 'hourglass_empty',    // 待检查
    1: 'check_circle',       // 通过
    2: 'error',              // 不通过
    3: 'verified',           // 人工核对
    4: 'autorenew',          // AI补全中（使用autorenew图标表示进行中，便于添加旋转效果）
    5: 'task_alt'            // AI补全完成
  }
  return map[status] || 'help_outline'
}

// 状态颜色映射
const getStatusColor = (status) => {
  const map = {
    0: 'grey',
    1: 'green',
    2: 'red',
    3: 'blue',
    4: 'deep-purple accent-2', // AI补全中使用紫色
    5: 'teal'                  // AI补全完成使用青色
  }
  return map[status] || 'grey'
}

// 响应式数据声明
const dataList = ref([]);
const exhibitionListStore = useExhibitionListStore()

// 修改 searchForm 的定义
const searchForm = reactive(exhibitionListStore.searchForm)

// 修改 pagination 的定义
const pagination = reactive(exhibitionListStore.pagination)

// 方法定义
// 在 script setup 中添加搜索表单数据

const loading = ref(false);
const $q = useQuasar()
const fileInput = ref(null)
const checkFileInput = ref(null)
const pagesNumber = computed(() => Math.ceil(pagination.rowsNumber / pagination.rowsPerPage))






// 添加行业选项（这里需要根据实际情况提供选项）
const industryOptions = ref([
  "农林牧渔",
"食品饮料",
"纺织服饰",
"皮革鞋包",
"妇婴用品",
"美容美发",
"礼品玩具及宠物用品",
"钟表眼镜",
"珠宝首饰",
"生活用品",
"婚庆用品",
"酒店用品",
"办公用品",
"教育装备",
"劳保用品",
"文体娱乐",
"健康养老",
"医疗及制药设备",
"药品及原料",
"汽车",
"自行车电动车摩托车",
"航空航天",
"船舶和轨道等交通",
"光电产品",
"计算机通信及电子设备",
"仪表仪器",
"冷暖设备",
"泵阀管道",
"五金工具",
"工业机械",
"工程机械",
"农业机械",
"食品加工设备",
"采矿及设备",
"电力及新能源设备",
"节能环保",
"化工产品",
"高新材料 / 技术",
"其他设备 / 材料",
"家电",
"家具家居",
"建筑建材",
"物流仓储",
"电商和交易会",
"广告传播",
"印刷包装",
"公共安全",
"连锁加盟",
"综合类",
"其他"
  // ... 其他行业选项
]);

// 添加统计数据和图表相关的响应式数据
const statistics = reactive({
  totalExhibitions: 0,
  maxCity: '',
  maxCountry: '',
  monthlyExhibitions: 0
})

const industryChart = ref(null)
const continentChart = ref(null)
const monthChart = ref(null)
const countryChart = ref(null)



// 添加词云图相关变量
let wordCloudInstance = null

// 处理词云数据

// 更新词云图


// 处理数据并更新图表




// 更新统计数据

// // 修改 onRequest 函数
// const onRequest = async (props) => {
//   const { page, rowsPerPage } = props.pagination
//   loading.value = true

//   try {
//     // 获取表格数据
//     const res = await getExhibitionList({
//       page: page,
//       pageSize: rowsPerPage,
//       chinese_name: searchForm.chinese_name,
//       city: searchForm.city,
//       industry: searchForm.industry
//     })

//     // 确保数据存在且格式正确
//     if (res && res.data) {
//       dataList.value = res.data.items || []
//       pagination.rowsNumber = res.data.total || 0
//       // 更新当前页码和每页显示数量
//       pagination.page = page
//       pagination.rowsPerPage = rowsPerPage

//       // 处理图表数据
//       const chartData = processChartData(dataList.value)
//       updateCharts(chartData)
//     } else {
//       throw new Error('数据格式不正确')
//     }
//   } catch (error) {
//     console.error('数据加载失败:', error)
//     $q.notify({
//       type: 'negative',
//       message: error.response?.data?.message || '数据加载失败，请稍后重试'
//     })
//     // 设置默认值
//     dataList.value = []
//     pagination.rowsNumber = 0
//   } finally {
//     loading.value = false
//   }
// }

// 添加数据处理函数

// 获取统计数据
const loadStatistics = async () => {
  try {
    const res = await getExhibitionStatistics()
    if (res.data) {
      statistics.totalExhibitions = res.data.totalExhibitions
      statistics.maxCity = res.data.maxCity
      statistics.maxIndustry = res.data.maxIndustry
      statistics.monthlyExhibitions = res.data.monthlyExhibitions
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
    $q.notify({
      type: 'negative',
      message: '获取统计数据失败'
    })
  }
}

// 修改 loadData 函数
const loadData = async () => {
  try {
    loading.value = true;
    // 获取分页数据
    const res = await getExhibitionList({
      page: pagination.page,
      pageSize: pagination.rowsPerPage,
      chinese_name: searchForm.chinese_name,
      city: searchForm.city,
      continent: searchForm.continent,
      country: searchForm.country,
      industry: searchForm.industry,
      exhibition_number: searchForm.exhibition_number,
      english_short_name: searchForm.chinese_name
    });

    // 确保数据存在且格式正确
    if (res && res.data) {
      dataList.value = res.data.items || [];
      pagination.rowsNumber = res.data.total || 0;
      // 更新当前页码和每页显示数量
      pagination.page = res.data.page || pagination.page;
      pagination.rowsPerPage = res.data.pageSize || pagination.rowsPerPage;

      // 加载统计数据
      loadStatistics();

        // 保存状态
      exhibitionListStore.setSearchForm({
        chinese_name: searchForm.chinese_name,
        city: searchForm.city,
        industry: searchForm.industry,
        exhibition_number: searchForm.exhibition_number
      })
      exhibitionListStore.setPagination({
        page: pagination.page,
        rowsPerPage: pagination.rowsPerPage
      })
    } else {
      throw new Error('数据格式不正确');
    }
  } catch (error) {
    console.error('数据加载失败:', error);
    $q.notify({
      type: 'negative',
      message: error.response?.data?.message || '数据加载失败，请稍后重试'
    });
    // 设置默认值
    dataList.value = [];
    pagination.rowsNumber = 0;
  } finally {
    loading.value = false;
  }
};

// 更新重置方法
const resetSearch = () => {
  searchForm.chinese_name = '';
  searchForm.exhibition_number = '';
  searchForm.city = '';
  searchForm.industry = null;
  searchForm.continent = '';
  searchForm.country = '';
  selectedContinent.value = '';
  selectedCountry.value = '';
  selectedCity.value = '';
  loadData();
};

const handleCreate = () => {
  router.push({
    path: '/exhibition/create', // 需要路由配置中定义 name
  });
};

const handleEdit = (row) => {
  console.log('编辑:', row.code);
  router.push({
    path: '/exhibition/edit', // 需要路由配置中定义 name
    query: {
      id: row.id
    },
  });
};

const handleDelete = (row) => {
  $q.dialog({
    title: '确认删除',
    message: `确定要删除展会 "${row.chinese_name}" 吗？`,
    persistent: true,
    ok: {
      label: '确认',
      color: 'negative'
    },
    cancel: {
      label: '取消',
      color: 'grey'
    }
  }).onOk(async () => {
    try {
      loading.value = true
      await deleteExhibition(row.id)

      $q.notify({
        type: 'positive',
        message: '删除成功'
      })

      // 重新加载数据
      loadData()
    } catch (error) {
      console.error('删除失败:', error)
      $q.notify({
        type: 'negative',
        message: error.response?.data?.message || '删除失败，请稍后重试'
      })
    } finally {
      loading.value = false
    }
  })
}

// 触发文件选择
const importExcel = () => {
  fileInput.value.click()
}

const exportExcel = async (item) => {
  try {
    loading.value = true

    // 处理数据
    const processedData = dataList.value.map(item => ({
      ...item,
      official_website: formatWebsite(item.official_website),
      exhibit_scope: formatExhibitScope(item.exhibit_scope),
      description: formatDescription(item.description)
    }));

    const response = await exportExhibition(item, processedData)

    // 创建下载对话框
    $q.dialog({
      title: '导出成功',
      message: '是否下载展会数据？',
      ok: {
        label: '下载',
        color: 'primary'
      },
      cancel: {
        label: '取消',
        color: 'grey'
      }
    }).onOk(() => {
      fetch(response.data.download_url)
        .then(res => res.blob())
        .then(blob => {
          const url = window.URL.createObjectURL(blob)
          const link = document.createElement('a')
          link.href = url
          link.download = 'exhibitions.xlsx'
          document.body.appendChild(link)
          link.click()
          window.URL.revokeObjectURL(url)
          document.body.removeChild(link)
        })
    })
  } catch (error) {
    console.error('导出失败:', error)
    $q.notify({
      type: 'negative',
      message: '导出失败，请稍后重试'
    })
  } finally {
    loading.value = false
  }
}


// 添加导出方法
const exportTXT = async (item) => {
  try {
    loading.value = true
    const response = await exportExhibition(item)

    // 创建下载对话框
    $q.dialog({
      title: '导出成功',
      message: '是否下载展会数据？',
      ok: {
        label: '下载',
        color: 'primary'
      },
      cancel: {
        label: '取消',
        color: 'grey'
      }
    }).onOk(() => {
      // 使用 fetch 获取文件内容
      fetch(response.data.download_url)
        .then(res => res.blob())
        .then(blob => {
          // 创建 blob URL
          const url = window.URL.createObjectURL(blob)
          const link = document.createElement('a')
          link.href = url
          link.download = 'exhibitions.txt' // 使用服务器返回的文件名或默认名称
          document.body.appendChild(link)
          link.click()
          // 清理
          window.URL.revokeObjectURL(url)
          document.body.removeChild(link)
        })
    })
  } catch (error) {
    console.error('导出失败:', error)
    $q.notify({
      type: 'negative',
      message: '导出失败，请稍后重试'
    })
  } finally {
    loading.value = false
  }
}

// 处理文件上传
// 修改 handleFileUpload 函数
const handleFileUpload = async (event) => {
  const file = event.target.files[0]
  if (!file) return

  // 检查文件类型
  if (!file.name.endsWith('.xlsx')) {
    $q.notify({
      type: 'negative',
      message: '请上传.xlsx格式的文件'
    })
    return
  }

  try {
    loading.value = true
    const response = await importExhibition(file)

    // 检查响应中是否包含检查报告URL
    if (response.data.reportUrl) {
      $q.dialog({
        title: '文件导入报告',
        message: '是否下载报告？',
        ok: {
          label: '下载',
          color: 'primary'
        },
        cancel: {
          label: '取消',
          color: 'grey'
        }
      }).onOk(() => {
        // 创建一个隐藏的a标签来下载文件
        const link = document.createElement('a')
        link.href = response.data.reportUrl
        link.download = 'excel报告.xlsx'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    }

    // 如果导入成功，显示成功消息
    if (response.data.success) {
      $q.notify({

        type: 'positive',
        message: response.data.message
      })
      // 重新加载数据
      loadData()
    } else {
      $q.notify({

        type: 'warning',
        message: '请查看导入报告了解详细信息'
      })
    }
  } catch (error) {
    $q.notify({
      type: 'negative',
      message: error.response?.data?.message || '导入失败'
    })
  } finally {
    loading.value = false
    event.target.value = ''
  }
}

// 修改 handleCheckFile 函数
const handleCheckFile = async (event) => {
  const file = event.target.files[0]
  if (!file) return

  if (!file.name.endsWith('.xlsx')) {
    $q.notify({

      type: 'negative',
      message: '请上传.xlsx格式的文件'
    })
    return
  }

  try {
    loading.value = true
    const response = await checkExhibition(file)

    if (response.data.reportUrl) {
      $q.dialog({
        title: '文件检查完成',
        message: '是否下载检查报告？',
        ok: {
          label: '下载',
          color: 'warning'
        },
        cancel: {
          label: '取消',
          color: 'grey'
        }
      }).onOk(() => {
        const link = document.createElement('a')
        link.href = response.data.reportUrl
        link.download = 'excel检查报告.xlsx'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    }
  } catch (error) {
    console.log(error)
    $q.notify({

      type: 'negative',
      message: error.response?.data?.message || '检查失败'
    })
  } finally {
    loading.value = false
    event.target.value = ''
  }
}





// 在 script setup 部分添加
const onPageChange = () => {
  loadData();
};

onMounted(() => {
  // get initial data from server (1st page)
  loadData()
  loadStatistics()
  window.addEventListener('resize', handleResize)
})

// 组件卸载时清理
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (wordCloudInstance) {
    wordCloudInstance.dispose()
  }
})

// 处理窗口大小变化
const handleResize = () => {
  if (wordCloudInstance) {
    wordCloudInstance.resize()
  }
}

// 触发检查文件选择
const checkExcel = () => {
  checkFileInput.value.click()
}

// 添加展开行的状态控制
const expanded = ref([]);

// 添加展开控制方法
const toggleExpand = (chineseName) => {
  const index = expanded.value.indexOf(chineseName);
  if (index === -1) {
    expanded.value = [chineseName]; // 只保留当前展开的行
  } else {
    expanded.value = []; // 关闭当前展开的行
  }
};

// 检查行是否展开
const isExpanded = (chineseName) => {
  return expanded.value.includes(chineseName);
};

// Add the previewImage method
const previewImage = (logo) => {
  const imageUrl = logo.startsWith('http') ? logo : 'https://gem.ccpititc.com' + logo;
  window.open(imageUrl, '_blank');
};

// 在 script setup 部分添加以下格式化方法
const formatWebsite = (website) => {
  if (!website) return '';
  return website.endsWith('/') ? website.slice(0, -1) : website;
};

const formatExhibitScope = (scope) => {
  if (!scope) return '';
  // 移除末尾的标点符号（包括句号、感叹号、问号等）
  return scope.replace(/[.。!！?？、，,;；]+$/, '');
};

const formatDescription = (desc) => {
  if (!desc) return '';
  // 如果末尾没有句号，则添加句号
  if (!desc.match(/[.。!！?？]$/)) {
    return desc + '。';
  }
  return desc;
};

// 添加三级级联选择的相关数据
const showLocationDialog = ref(false);
const showIndustryDialog = ref(false);
const currentLocationStep = ref(1);
const selectedContinent = ref('');
const selectedCountry = ref('');
const selectedCity = ref('');

// 模拟的大洲数据
const continentOptions = ref([
  '亚洲', '欧洲', '北美洲', '南美洲', '非洲', '大洋洲', '南极洲'
]);

// 模拟的国家数据（根据大洲）
const countryOptions = ref({
  '亚洲': ['中国', '日本', '韩国', '印度', '新加坡', '泰国', '马来西亚', '越南', '阿联酋'],
  '欧洲': ['德国', '法国', '英国', '意大利', '西班牙', '荷兰', '瑞士', '瑞典', '波兰', '俄罗斯'],
  '北美洲': ['美国', '加拿大', '墨西哥'],
  '南美洲': ['巴西', '阿根廷', '智利', '哥伦比亚', '秘鲁'],
  '非洲': ['埃及', '南非', '摩洛哥', '肯尼亚', '尼日利亚'],
  '大洋洲': ['澳大利亚', '新西兰'],
  '南极洲': ['南极洲科考站']
});

// 模拟的城市数据（根据国家）
const cityOptions = ref({
  '中国': ['北京', '上海', '广州', '深圳', '成都', '重庆', '杭州', '南京', '武汉', '西安'],
  '日本': ['东京', '大阪', '名古屋', '福冈', '札幌'],
  '美国': ['纽约', '洛杉矶', '芝加哥', '休斯顿', '拉斯维加斯', '旧金山', '波士顿'],
  '德国': ['柏林', '慕尼黑', '汉堡', '法兰克福', '科隆', '杜塞尔多夫', '汉诺威'],
  '法国': ['巴黎', '里昂', '马赛', '波尔多'],
  '英国': ['伦敦', '曼彻斯特', '伯明翰', '利物浦', '爱丁堡'],
  // 其他国家的城市可以根据需要添加
});

// 防抖函数
const debounce = (fn, delay) => {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
};

// 带防抖的搜索函数
const debounceSearch = debounce(() => {
  loadData();
}, 300);

// 选择大洲
const selectContinent = (continent) => {
  selectedContinent.value = continent;
  selectedCountry.value = '';
  selectedCity.value = '';
  currentLocationStep.value = 2;
};

// 选择国家
const selectCountry = (country) => {
  selectedCountry.value = country;
  selectedCity.value = '';
  currentLocationStep.value = 3;
};

// 选择城市
const selectCity = (city) => {
  selectedCity.value = city;
  // 自动关闭对话框并应用过滤
  confirmLocation();
};

// 确认地区选择
const confirmLocation = () => {
  searchForm.continent = selectedContinent.value;
  searchForm.country = selectedCountry.value;
  searchForm.city = selectedCity.value;
  showLocationDialog.value = false;
  loadData(); // 自动触发搜索
};

// 返回上一步
const previousLocationStep = () => {
  if (currentLocationStep.value > 1) {
    currentLocationStep.value--;
  }
};

// 清除地区选择
const clearLocation = () => {
  selectedContinent.value = '';
  selectedCountry.value = '';
  selectedCity.value = '';
  searchForm.continent = '';
  searchForm.country = '';
  searchForm.city = '';
  currentLocationStep.value = 1;
};

// 获取地区显示标签
const getLocationLabel = () => {
  if (selectedCity.value) {
    return `${selectedContinent.value} - ${selectedCountry.value} - ${selectedCity.value}`;
  } else if (selectedCountry.value) {
    return `${selectedContinent.value} - ${selectedCountry.value}`;
  } else if (selectedContinent.value) {
    return selectedContinent.value;
  } else {
    return '选择地区';
  }
};

// 选择行业
const selectIndustry = (industry) => {
  searchForm.industry = industry;
  loadData(); // 自动触发搜索
};

// 清除行业选择
const clearIndustry = () => {
  searchForm.industry = null;
  loadData(); // 自动触发搜索
};

// 添加行业搜索功能相关代码
const industrySearchTerm = ref('');

// 过滤行业列表
const filteredIndustries = computed(() => {
  if (!industrySearchTerm.value) {
    return industryOptions.value;
  }
  
  return industryOptions.value.filter(industry => 
    industry.toLowerCase().includes(industrySearchTerm.value.toLowerCase())
  );
});

</script>
<style lang="scss">
  .page-header {
    z-index: 2;
    margin: 8px;
    .header-title {
      font-size: 14px;

      .first-breadcrumbs {
        .q-breadcrumbs__el-icon {
          font-size: 120%;
          position: relative;
          top: -1px;
        }
      }
    }
  }
  .hidden-input {
    display: none;
  }
  .mini-stat-card {
    height: 80px;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .text-h6 {
      font-size: 1.5rem;
      margin: 4px 0;
    }

    .text-subtitle2 {
      font-size: 0.75rem;
    }
  }

  .chart-card {
    height: 300px;
    border: 1px solid #e0e0e0;
  }

  .chart-container {
    height: 250px;
    position: relative;
  }

  .hover-underline {
    &:hover {
      text-decoration: underline !important;
    }
  }

  .table-label {
    width: 120px;
    background-color: #f5f5f5;
  }

  .wrap-cell {
    padding: 12px;
    line-height: 1.5;

    .text-wrap {
      white-space: pre-wrap !important;
      word-break: break-word !important;
      width: 100%;
    }

    .scope-info,
    .description-info,
    .remarks-info,
    .error-info,
    .advice-info {
      display: block;
      padding: 8px;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.02);
      white-space: pre-wrap !important;
      word-break: break-word !important;
      width: 100%;

      &:not(:last-child) {
        margin-bottom: 8px;
      }
    }
  }

  // 添加表格相关样式
  .q-markup-table {
    width: 100%;
    table-layout: fixed; // 这个属性很重要，确保列宽固定

    td {
      vertical-align: top;
    }
  }

  .table-label {
    width: 120px;
    min-width: 120px; // 确保标签列不会被压缩
    background-color: #f5f5f5;
  }

  // 展开行的样式
  .expanded-content {
    width: 100%;

    .q-markup-table {
      margin: 0;

      td {
        &:first-child {
          width: 120px;
        }

        &:last-child {
          width: calc(100% - 120px);
        }
      }
    }
  }

  .location-info, .time-info, .area-info, .contact-info, .website-info, .industry-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .q-chip {
    height: 28px;
  }

  .text-grey-7 {
    opacity: 0.7;
  }

  .hover-underline {
    &:hover {
      text-decoration: underline !important;
    }
  }

  // 添加新的级联选择和行业选择的样式
  .location-selector,
  .industry-selector {
    height: 40px;
    text-align: left;
    justify-content: flex-start;
    border: 1px solid rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    
    &:hover {
      background-color: rgba(0, 0, 0, 0.03);
    }
  }

  .location-card {
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    
    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }
    
    &.selected {
      border: 2px solid #1976d2;
      background-color: rgba(25, 118, 210, 0.08);
    }
    
    .continent-icon,
    .country-icon,
    .city-icon {
      display: flex;
      justify-content: center;
      margin-bottom: 8px;
    }
  }

  // 改进行业选择样式
  .industry-grid {
    height: 450px;
    overflow-y: auto;
    padding: 8px;
    
    .industry-card {
      transition: all 0.25s ease;
      height: 100%;
      border-radius: 8px;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        background-color: rgba(25, 118, 210, 0.04);
      }
      
      &.industry-card-selected {
        background-color: #1976d2;
        color: white;
      }
      
      .industry-name {
        font-size: 0.9rem;
        line-height: 1.2;
      }
    }
  }
  
  // 处理行业文字过长时的省略样式
  .ellipsis-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  // 添加旋转动画
  @keyframes rotating {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  .rotating-icon {
    animation: rotating 1.5s linear infinite;
  }
  
  // AI处理中按钮效果
  .ai-processing-btn {
    position: relative;
    overflow: hidden;
    
    &:after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0) 70%
      );
      animation: pulse 2s linear infinite;
    }
  }
  
  @keyframes pulse {
    0% {
      transform: scale(0.8);
      opacity: 0.7;
    }
    50% {
      transform: scale(1);
      opacity: 0.3;
    }
    100% {
      transform: scale(0.8);
      opacity: 0.7;
    }
  }
</style>
